<template>
  <div class="content">
    <!-- 首页内容 -->
    <el-row class="content_text">
      <el-col :span="12" :offset="2">
        <div>
          <div class="top">
            <span>诚信 服务 创新 效率</span>
          </div>
          <div class="mid">
            <span>Integrity·Service·Creative·Efficiency</span>
          </div>
          <div class="btm">
            <span>是中国银行业监督管理委员会批准的专门从事融资租赁业务的国有非银行金融机构，是全国首批国内著名的金融租赁公司之一。</span>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row class="content_list_msg">
      <!-- 消息中心 -->
      <el-col :span="9" :offset="2">
        <div class="title">
          <el-row>
            <el-col :span="1" :offset="1">
              <img class="img" src="../../assets/img/main/main_message.png">
            </el-col>
            <el-col :span="4">
              <div class="msg">消息中心</div>
              <div class="msg_num" v-if="messageCenter.cntNew > 0">
                <span>{{messageCenter.cntNew}}</span>
              </div>
            </el-col>
            <el-col :span="4" :offset="14">
              <div class="more">查看全部</div>
            </el-col>
          </el-row>
        </div>
        <main-list-view :messageData="messageCenter.listData">
          <div class="empty" v-if="messageCenter.listData == null">
            <div>未查询到最新消息</div>
          </div>
        </main-list-view>
      </el-col>
      <!-- 工作台 -->
      <el-col :span="9" :offset="2">
        <div class="title">
          <el-row>
            <el-col :span="1" :offset="1">
              <img class="img" src="../../assets/img/main/main_work.png">
            </el-col>
            <el-col :span="4">
              <div class="msg">工作台</div>
              <div class="msg_num" v-if="workCenter.cntNew > 0">
                <span>{{workCenter.cntNew}}</span>
              </div>
            </el-col>
            <el-col :span="4" :offset="14">
              <div class="more">查看全部</div>
            </el-col>
          </el-row>
        </div>
        <main-list-view :messageData="workCenter.listData">
          <div class="empty" v-if="workCenter.listData == null">
            <div>未查询到待办事项</div>
          </div>
        </main-list-view>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import MainListView from '../../components/home/main-list-view.vue'
export default {
  components: {
    'main-list-view': MainListView
  },
  data () {
    return {
      // 消息中心数据
      messageCenter: {
        cntNew: 2, // 最新消息数
        listData: [
          { isNew: true, content: '江苏金融租赁：服务实体经济，打造行业排头兵', time: '2019-04-11 09:32:12' },
          { isNew: true, content: '江苏金融租赁：服务实体经济，打造行业排头兵', time: '2019-04-11 09:32:12' },
          { isNew: false, content: '江苏金融租赁：服务实体经济，打造行业排头兵', time: '2019-04-11 09:32:12' },
          { isNew: false, content: '江苏金融租赁：服务实体经济，打造行业排头兵', time: '2019-04-11 09:32:12' },
          { isNew: false, content: '江苏金融租赁：服务实体经济，打造行业排头兵', time: '2019-04-11 09:32:12' }
        ]
      },
      // 工作台数据
      workCenter: {
        cntNew: 0, // 最新消息数
        listData: null
      }
    }
  }
}
</script>
<style lang="scss">
.content {
  .content_text {
    color: #ffffff;
    padding: 50px 0 50px 0;
    .top {
      padding-bottom: 20px;
      border-bottom: 1px solid #ffffff;
      font-size: 50px;
      letter-spacing: 0.21px;
    }
    .mid {
      padding: 20px 0;
      font-family: Roboto-Bold;
      font-size: 31px;
      letter-spacing: 0;
    }
    .btm {
      opacity: 0.8;
      font-size: 16px;
      letter-spacing: 0;
    }
  }
  .content_list_msg {
    .title {
      background-color: #000000;
      color: #ffffff;
      height: 50px;
      line-height: 50px;
      width: 100%;
      min-width: 510px;
      .img {
        width: 18px;
        vertical-align: middle;
      }
      .msg {
        font-size: 14px;
        display: inline-block;
      }
      .msg_num {
        position: relative;
        vertical-align: middle;
        display: inline-block;
        padding: 0 5px;
        font-size: 10px;
        span {
          background-image: linear-gradient(-263deg, #d9180f 0%, #ff7661 100%);
          border-radius: 2px;
          padding: 0 5px;
        }
      }
      .more {
        font-size: 12px;
        text-align: right;
        padding-right: 20px;
        cursor: pointer;
      }
      .more:hover {
        color: #ef5d5d;
      }
    }
  }
  .empty {
    clear: both;
    height: 204px;
    background: #ffffff;
    text-align: center;
    font-size: 14px;
    color: #282830;
    div {
      padding-top: 5%;
    }
  }
}
</style>
